<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/oauthplatform/static/sms/css/base.css"/>
	<link rel="stylesheet" href="/oauthplatform/static/sms/plugin/layui/css/layui.css">
	<title>统一身份认证管理平台</title>
	<style>
		.content {width: 1438px;margin: 0 auto;position: absolute;left: 50%;top: 50%;margin: -357px 0 0 -719px;}
		.backg {background: url(/oauthplatform/static/sms/img/bj1.png);height: 100%;}
		.containerFiex {height: 713px;background: #FFFFFF;box-shadow: 0px 7px 27px 0px rgba(133, 169, 231, 0.51);border-radius: 20px;display: flex;}
		.containerLeft {background: url(/oauthplatform/static/sms/img/bj2.png);width: 832px;}
		.containerLeft img {margin-top: 38px;margin-left: 39px;}
		.containerRight {width: 460px;margin-left: 71px;margin-right: 71px;margin-top: 143px;}
		.record {border-bottom: 4px solid #1765AD;line-height: 35px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #1765AD !important;cursor: pointer;text-align: center;}
		.tabRight {display: flex;justify-content: space-around;}
		.tabRight div {line-height: 35px;font-size: 24px;font-family: Microsoft YaHei;font-weight: 400;color: #999999;cursor: pointer;text-align: center;margin-bottom: 46px;}
		.phone-input {border: none;width: 456px;height: 69px;background: #F8F8F8;border-radius: 14px;font-size: 16px;margin-bottom: 23px;}
		.codeFlex {display: flex;margin-bottom: 23px;}
		.code-input {border: none;width: 70%;height: 69px;background: #F8F8F8;border-radius: 14px 0 0 14px;font-size: 16px;}
		.getCode {width: 30%;height: 69px;background: #1765AD;border-radius: 0 14px 14px 0;font-size: 16px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;}
		.register {height: 56px;background: #1765AD;box-shadow: 0px 6px 9px 0px rgba(61, 163, 244, 0.32);border-radius: 6px;font-size: 22px;font-family: Microsoft YaHei;font-weight: 400;color: #FFFFFF;margin-top: 31px;}
		.code-form {display: none;}
		.slider-btn-success {border: 1px solid #1765AD !important;color: #1765AD !important;}
		.slider-bg {background-color: #1765AD !important;}
	</style>
</head>
<body>
<div class="backg">
	<div class="content">
		<div class="container">
			<div class="containerFiex">
				<div class="containerLeft">
					<img src="/oauthplatform/static/sms/img/logo1.png" alt="">
				</div>
				<div class="containerRight">
					<div class="tabRight">
						<div class="record">账号登录</div>
						<div>验证码登录</div>
					</div>
					<!-- 验证码登录 -->
					<form class="layui-form code-form" action="">
						<div class="layui-form-item">
							<input input type="tel" name="phone" lay-verify="required|phoneNew" lay-reqtext="手机号为必填项"
							       autocomplete="off" placeholder="请输入手机号" class="layui-input phone-input phone-val">
							<div class="codeFlex">
								<input type="text" name="number" lay-verify="required" lay-reqtext="验证码为必填项"
								       placeholder="请输入验证码" autocomplete="off" class="layui-input code-input">
								<button type="button" class="layui-btn layui-btn-primary getCode">获取验证码</button>
							</div>
							<button type="button" class="layui-btn layui-btn-fluid layui-btn-radius register" lay-submit
							        lay-filter="code_submit_button">立即登录
							</button>
						</div>
					</form>
					<!-- 账号登录 -->
					<form class="layui-form pass-form" action="">
						<div class="layui-form-item">
							<input input type="text" name="username" lay-verify="required" lay-reqtext="用户名为必填项"
							       autocomplete="off" placeholder="请输入账号" class="layui-input phone-input">
							<input type="password" name="password" lay-verify="pass" placeholder="请输入密码"
							       autocomplete="off" class="layui-input phone-input">
							<div id="slider"></div>
							<button type="button" class="layui-btn layui-btn-fluid layui-btn-radius register" lay-submit
							        lay-filter="pass_submit_button">立即登录
							</button>
						</div>
					</form>
                    <#if SPRING_SECURITY_LAST_EXCEPTION??>
						<input type="hidden" id="errorMsg" value="${SPRING_SECURITY_LAST_EXCEPTION.message!''}">
                    </#if>
				</div>
			</div>
		</div>
	</div>
</div>
</body>
<script src="/oauthplatform/static/sms/js/jquery.min.js"></script>
<script src="/oauthplatform/static/sms/plugin/layui/layui.js"></script>
<script>
	$(function () {
		if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
			window.location.href = "/oauthplatform/h5SignIn/index"
		}

		layui.config({
			base: '/oauthplatform/static/lib/verification/'
		}).use(['sliderVerify', 'jquery', 'form'], function () {
			var sliderVerify = layui.sliderVerify, $ = layui.jquery, form = layui.form;
			var slider = sliderVerify.render({
				elem: '#slider',
				onOk: function () { //当验证通过回调
					layer.msg("滑块验证通过");
				}
			});
			$(document).ready(function () {
				var errorMsg = $("#errorMsg").val();
				if (errorMsg != null && errorMsg != '') {
					$(".errorMsg").show();
					layer.msg(errorMsg);
				}
			})
			// 自定义校验规则
			form.verify({
				pass: [ /^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
				phoneNew: [
					/^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/,
					'请输入正确的手机号'
				]
			});

			//监听登录 —— 验证码登录
			form.on('submit(code_submit_button)', function (data) {
				post("/oauthplatform/authentication/mobile", {mobile: data.field.phone, smsCode: data.field.number});
				return false;
			});

			//监听登录 —— 账号登录
			form.on('submit(pass_submit_button)', function (data) {
				if (slider.isOk()) {
					post("/oauthplatform/login", {username: data.field.username, password: data.field.password});
				} else { layer.msg("请先通过滑块验证"); }
				return false;
			});
		});

		// 页签切换
		$(".tabRight div:nth-child(1)").click(function () {
			$(".pass-form").show();
			$(".code-form").hide();
			$(this).removeClass(".tabRight div");
			$(this).addClass("record");
			$(this).siblings().removeClass("record");
			$(this).siblings().addClass(".tabRight div");
		});
		$(".tabRight div:nth-child(2)").click(function () {
			$(".code-form").show();
			$(".pass-form").hide();
			$(this).removeClass(".tabRight div");
			$(this).addClass("record");
			$(this).siblings().removeClass("record");
			$(this).siblings().addClass(".tabRight div");
		});
		// input 焦点事件
		$(".phone-val").blur(function () {
			$(".phone-val").removeAttr("style");
		})

		// 获取验证码点击事件
		$(".getCode").click(function () {
			var phone = $(".phone-val").val();
			var phoneReg = /^[1](([3][0-9])|([4][0,1,4-9])|([5][0-3,5-9])|([6][2,5,6,7])|([7][0-8])|([8][0-9])|([9][0-3,5-9]))[0-9]{8}$/;
			if (phone == '') {
				layer.msg("手机号码不能为空！");
				$(".phone-val").attr("style", "color: red;");
			} else if (phone.length != 11) {
				layer.msg("请输入有效的手机号码！");
				$(".phone-val").attr("style", "color: red;");
			} else if (!phoneReg.test(phone)) {
				layer.msg("请输入有效的手机号码！");
				$(".phone-val").attr("style", "color: red;");
			} else { checkPhoneIsExist(); }
		});

		// 验证手机号是否信息完善
		function checkPhoneIsExist() {
			var phone = $(".phone-val").val();
			$.ajax({
				type: 'get',
				data: { mobile: phone, codePhoneType: "0", },
				url: '/oauthplatform/code/sms',
				success: function (data) {
					if (data == 200) {
						var time = 60;
						var getTime = setInterval(function () {
							if (time == -1) {
								clearInterval(getTime);
								$(".getCode").prop('disabled', false);
								$(".getCode").text("获取验证码");
								time = 60;
								return;
							} else {
								$(".getCode").prop('disabled', true);
								$(".getCode").text("" + time + "s后重新发送");
								time--;
							}
						}, 1000);
					} else if (data == 121) {
						layer.msg("无该手机号信息，请账号登录！");
						$(".tabRight div:nth-child(1)").trigger("click");
					} else if (data == 122) {
						layer.msg("该用户实名认证未完善，请账号登录完善！");
						$(".tabRight div:nth-child(1)").trigger("click");
					} else if (data == 123) {
						layer.msg("手机号已经被注册！请联系管理员或使用账号登录");
						$(".tabRight div:nth-child(1)").trigger("click");
					} else {
						layer.msg("网络异常请稍后重试！");
					}
				}
			})
		};
	})

	/*虚拟表单*/
	function post(URL, PARAMS) {
		var temp = document.createElement("form");
		temp.action = URL;
		temp.method = "post";
		temp.style.display = "none";
		for (var x in PARAMS) {
			var opt = document.createElement("textarea");
			opt.name = x;
			opt.value = PARAMS[x];
			temp.appendChild(opt);
		}
		document.body.appendChild(temp);
		temp.submit();
		return temp;
	}

	function get(URL, PARAMS) {
		var temp = document.createElement("form");
		temp.action = URL;
		temp.method = "get";
		temp.style.display = "none";
		for (var x in PARAMS) {
			var opt = document.createElement("textarea");
			opt.name = x;
			opt.value = PARAMS[x];
			temp.appendChild(opt);
		}
		document.body.appendChild(temp);
		temp.submit();
		return temp;
	}
</script>
</html>